<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Verify Your Email</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='style2.css') }}">
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
</head>
<body>
<div class="container" id="container">
    <div class="form-container verification-container">
        <form action="#" method="POST">
            <h1>查收邮箱</h1>
            <p>请输入发送到你邮箱的验证码</p>
            <div class="verification-code">
                <input type="text" maxlength="1" name="code1">
                <input type="text" maxlength="1" name="code2">
                <input type="text" maxlength="1" name="code3">
                <input type="text" maxlength="1" name="code4">
            </div>
            <button type="submit">提交验证码</button>
        </form>
    </div>

    <div class="overlay-container">
        <div class="overlay">
            <div class="overlay-panel overlay-right">
                <h1>邮箱验证</h1>
                <p>我们已经发送了一封包含验证码的邮件到您的邮箱，请检查并输入验证码以验证您的帐户。</p>
            </div>
        </div>
    </div>
</div>
<script>
    document.addEventListener("DOMContentLoaded", function() {
        // Check if alert_message and alert_type are available in the template
        const alertMessage = "{{ alert_message|safe }}";
        const alertType = "{{ alert_type|safe }}";

        if (alertMessage) {
            Swal.fire({
                toast: true,
                position: 'top-end',
                icon: alertType,
                title: alertMessage,
                showConfirmButton: false,
                timer: 3000
            });
        }
    });
</script>

</body>
</html>